<style scoped>
/* head */
.item-header {
  border-bottom: 2px solid #f0f0f0;
  padding: 20px 0;
}

.tab-item-box{
  width: 8px;
  height: 8px;
  border-radius: 100%;
  margin-right: 5px;
}

/* item */
.item{
  width: 100%;
  min-height: 60vh;
  margin: 20px auto;
}
.item-week{
  padding:0;
}
.item-week-box{
  width: 14.25%;
  text-align: center;
  height: 80px;
  line-height: 80px;
  border:1px solid gray;
}
.item-day-box{
   width: 14.25%;
   height: 150px;
   color:#000;
   position: relative;
  border:1px solid gray;
}
.item-day-day{
  position: absolute;
  right: 5px;
  top:5px;
}
.item-day-new{
  padding:5px;
  border:1px solid #000;
  background-color:aqua;
}
.item-day-box-active{
  background-color:aquamarine;
}
</style>

<template>
  <div class="wrap">
   
    <!-- tab -->
    <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
    >
      <el-menu-item index="0">全部行程</el-menu-item>
      <el-menu-item class="tab-item flex align-center" v-for="(item,index) in tabs" :key="index" :index="index+1+''">
          <div class="tab-item-box" :style="{ backgroundColor: item.color }"></div>
          <div class="tab-item-name">{{item.name}}</div>
        </el-menu-item>
    </el-menu>

    <!-- item -->
    <div class="item">
      <!-- week -->
      <div class="item-week flex">
        <div v-for="(item,index) in weeks" :key="index"  class="item-week-box">{{item}}</div>
      </div>
      <!-- day -->
      <div class="item-day flex flex-wrap">
        <div  v-for="(day,index) in days"  :key="index"
		@mouseover="calendarMouse(0,index)" @mouseout="calendarMouse(1,index) "
		 :class="{'item-day-box-active':index==i}" class="item-day-box flex align-center justify-center">
          <div class="item-day-day">{{day}}</div>
          <div v-show="newShow[index]" class="item-day-new">新建日历</div>
        </div>
      </div>
    </div>
  </div>
</template>
   
<script>

export default {
  data() {
    return {
      activeIndex: "0",
      i:'', //当天的索引
		newShow:[],
		days:[],
		year:'',
		month:'',
		day:'',
		weeks:['周一','周二','周三','周四','周五','周六','周日'],
      tabs:[
          {
              name:'会议',
              color:'red'
          },
           {
              name:'调研',
              color:'pink'
          },
           {
              name:'活动',
              color:'green'
          },
           {
              name:'中央及部署',
              color:"blue"
          },
           {
              name:'专题汇报',
              color:'orange'
          },
            {
              name:'交流',
              color:'yellow'
          },
           {
              name:'来访及访问',
              color:'red'
          },
            {
              name:'全年规划',
              color:'blue'
          }
      ],
    };
  },

  activated() {},
  created() {
    console.log('ddddd',this.$store)
    this.fnToDay();	
  },
  mounted() {},
  computed: {
    
  },
  methods: {
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      },
      // 鼠标移上去
		calendarMouse(type,index){
			var arr = this.newShow;
			if(type==0){
				this.$set(this.newShow,[index],true)
			}else{
				this.$set(this.newShow,[index],false)
			}
		},

		// 第一次进来获取当前天数和月份
		fnToDay(){
			var date = new Date();
			var year = date.getFullYear(); 
			var month = date.getMonth()+1;
			var day = date.getDate(); 
		
			this.year = year;
			this.month = month;
			this.day = day;
			this.getDays();

			// 标注当前天数 和 添加新建行程功能
			var arr = this.days;
			for(let i=0,len=arr.length;i<len;i++){
				if(arr[i]==day){
					this.i = i
				}
				this.newShow.push(false)
			}
		},
		// 上个月
		fnPre(){
			var month = this.month-1;
			if(month==0){
				this.month = 12;
				this.year = this.year - 1;
			}else{
				this.month = month;
			}
			this.i = '-1'
			// 渲染天数
			this.getDays()
		},
		// 下个月
		fnNext(){
			var month = this.month+1;
			if(month==13){
				this.month = 1;
				this.year = this.year + 1;
			}else{
				this.month = month;
			}
			this.i = '-1'
			// 渲染天数
			this.getDays()
		},
		// 渲染天数
		getDays(){
			var firstDay = this.getFirstDay(this.year,this.month);
			var dayLength = this.getThisMonthDays(this.month,this.year);
			
			var days = [];
			for(let i=1,len=dayLength+1;i<len;i++){
				days.push(i)
			}
			// 获取上个月的天数
			var lastMonthDays;
			if(this.month == 1){
				lastMonthDays = this.getThisMonthDays(12,this.year-1,);
			}else{
				lastMonthDays = this.getThisMonthDays(this.month-1,this.year);
			}
			
			// 获取下月天数
			var nextMonthDays;
			if(this.month == 12){
				nextMonthDays = this.getThisMonthDays(1,this.year+1);
			}else{
				nextMonthDays = this.getThisMonthDays(this.month+1,this.year);
			}
			
			// 获取天数列表
			
				switch(firstDay){
				
				case 1: //星期一
					
					for(let i=1,len=36-dayLength;i<len;i++){
						days.push(i)
					}
					this.days = days;
					break;
				case 2://星期二
					// for(let i=0)
					days.unshift(lastMonthDays-0)
					for(let i=1,len=36-dayLength-1;i<len;i++){
						days.push(i)
					}
					this.days = days;
					break;
				case 3://星期三
					days.unshift(lastMonthDays-1,lastMonthDays-0)
					for(let i=1,len=36-dayLength-2;i<len;i++){
						days.push(i)
					}
					this.days = days;
					break;
				case 4://星期4
					days.unshift(lastMonthDays-2,lastMonthDays-1,lastMonthDays-0)
					for(let i=1,len=36-dayLength-3;i<len;i++){
						days.push(i)
					}
					this.days = days;
					break;
				case 5://星期5
					days.unshift(lastMonthDays-3,lastMonthDays-2,lastMonthDays-1,lastMonthDays-0)
					for(let i=1,len=36-dayLength-4;i<len;i++){
						days.push(i)
						
					}
				
					this.days = days;
					break;
				case 6://星期6
					days.unshift(lastMonthDays-4,lastMonthDays-3,lastMonthDays-2,lastMonthDays-1,lastMonthDays-1)
					for(let i=1,len=35-dayLength-5;i<len+1;i++){
						days.push(i)
					}
					this.days = days;
					break;
				case 0: //星期天
					days.unshift(lastMonthDays-5,lastMonthDays-4,lastMonthDays-3,lastMonthDays-2,lastMonthDays-1,lastMonthDays-0)
					for(let i=1,len=36-dayLength-6;i<len;i++){
						days.push(i)
					}
					this.days = days;
					break;
				}
		},

		//判断某年某月的1号是星期几
		getFirstDay:function(_year,_month) {
		    var allDay = 0, y = _year-1, i = 1;
		    allDay = y + Math.floor(y/4) - Math.floor(y/100) + Math.floor(y/400) + 1;
		    for ( ; i<_month; i++) {
		        switch (i) {
		            case 1: allDay += 31; break;
		            case 2: 
		                if(this.runNian(_year)) { allDay += 29; }
		                else { allDay += 28; }
		                break;
		            case 3: allDay += 31; break;
		            case 4: allDay += 30; break;
		            case 5: allDay += 31; break;
		            case 6: allDay += 30; break;
		            case 7: allDay += 31; break;
		            case 8: allDay += 31; break;
		            case 9: allDay += 30; break;
		            case 10: allDay += 31; break;
		            case 11: allDay += 30; break;
		            case 12: allDay += 31; break;
		        }
		    }
		
		    return allDay%7;
		},
		// 获取当月天数
		getThisMonthDays:function(_month,_year){
			var monthDay = '';
			switch(_month) {
	        case 1: 
	        	monthDay = 31; 
	        	break;
	        case 2:
	            if(this.runNian(_year)) { 
	            	monthDay = 29; 
	            } else { 
	            	monthDay = 28; 
	            }
	            break;
	        case 3: monthDay = 31; break;
	        case 4: monthDay = 30; break;
	        case 5: monthDay = 31; break;
	        case 6: monthDay = 30; break;
	        case 7: monthDay = 31; break;
	        case 8: monthDay = 31; break;
	        case 9: monthDay = 30; break;
	        case 10: monthDay = 31; break;
	        case 11: monthDay = 30; break;
	        case 12: monthDay = 31; break;   
	    }
	        return monthDay;

		},
		//判断闰年
		runNian:function(_year) {
		    if(_year%400 === 0 || (_year%4 === 0 && _year%100 !== 0) ) {
		        return true;
		    }
		    else { return false; }
		}
		
  }
};
</script>

